<template>
	<view class="">
		<view class="cmymain">
			<!-- 顶部导航 start -->
			<view class="bf">
				<u-dropdown ref="uDropdown" :active-color="tColor">
							<u-dropdown-item @change="refresh" v-model="params.type" title="状态" :options="paramsArr.type"></u-dropdown-item>
							<u-dropdown-item @change="refresh" v-model="params.orderType" title="类型" :options="paramsArr.orderType"></u-dropdown-item>
							<u-dropdown-item @change="refresh" v-model="params.platform" title="来源" :options="paramsArr.platform"></u-dropdown-item>
							<u-dropdown-item @change="refresh" v-model="params.payMode" title="支付方式" :options="paramsArr.payMode"></u-dropdown-item>
				</u-dropdown>
				<scroll-view v-if="sarr.length" class='ws-n sarr pt10 bf p03' scroll-x='true' :scroll-into-view="toView">
					<block v-for="(v,i) in sarr" :key='i' >
						<view :id="'id' + i" @click="clickSarr(i)" class='f-g-0 mr15 bs10 c6 dis-in sarri f28 t-c'
							:class="{wei:v.active}"
							:style="{background:v.active?`rgba(${cTR(tColor)},1)`:'',color:v.active?'#ffffff':'#000'}">
							{{v.name}}</view>
					</block>
				</scroll-view>
			</view>
			<!-- 顶部导航 end -->
			<FlowList :data="dataList" list-type="orderQuery"/>
			<jzz bgcolor="transparent" imgn='zwhb' :nodata="dataList.length==0&&isget" :mygd='mygd' />
			<u-calendar v-model="showrl" mode="range" :btnstyle="{ background: '#FE9367' }" range-color="#FE9367"
				range-bg-color="rgba(253,215,75,0.2)" active-bg-color="#FE9367" @change="changeDate"></u-calendar>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import navTab from '@/components/common/functionCmp/nav-tab.vue'
	import FlowList from './components/FlowList.vue'
	import jzz from '@/components/common/jzz.vue'
	import {
		utilMixins,
		sljz
	} from "@/common/util-mixins.js"
	export default {
		name: 'myCoupon',
		components: {
			navTab,
			FlowList,
			jzz
		},
		mixins: [utilMixins,sljz],
		data() {
			return {
				paramsArr:{
					type:[{label: '所有订单',value: 0},{label: '已完成',value: 1},{label: '已取消',value: 2},{label: '进行中',value: 3}],
					orderType:[
						{label: '不限',value: 0},{label: '外卖',value: 2},{label: '堂食',value: 1},{label: '当面付',value: 3},
						{label: '快餐',value: 4},{label: '其他',value: 5},
					],
					platform:[{label: '不限',value: 0},{label: '微信小程序',value: 1},{label: '支付宝小程序',value: 2},{label: '收银台',value: 3}],
					payMode:[
						{label: '不限',value: 0},{label: '微信支付',value: 1},{label: '支付宝支付',value: 2},{label: '余额支付',value: 3},
						{label: '现金支付',value: 4},{label: '线下支付',value: 5},
					],
				},
				toView:'',
				dateTitle: '时间',
				showrl: false,
				sarr: [
					{name: '全部',active: true,type: 0}, {name: '今天',active: false,type: 1},
					{name: '近七天',active: false,type: 2}, {name: '近十五天',active: false,type: 3},
					{name: '具体日期',active: false,type: 4}
					],
				dataList: [],
				result:{},
				params: {
					type:'0',//订单状态
					orderType:'0',//订单类型
					platform:'0',//订单来源
					payMode:'0',//支付方式
					timeType: 0,//日期
					startTime: '',
					endTime: '',
					size: 10,
					page: 1,
				},
			}
		},
		async onLoad(options) {
			this.getSystem()
			this.util.setNT('订单查询')
			this.getList()
			this.isOnLoad = false
		},
		onShow() {
			if (this.isOnLoad) {
				this.refresh();
			}
		},
		computed: {
			tabs() {
				return [{
					name: '余额流水',
				}]
			}
		},
		methods: {
			changeDate(e) {
				this.query.startTime = e.startDate
				this.query.endTime = e.endDate
				this.refresh()
			},
			clickSarr(index) {
				this.sarr.forEach((item, i) => {
					if (i === index) {
						item.active = true
						this.toView = 'id' + (i-2)
						if(item.type != 4){
							this.refresh()
						}else{
							this.showrl = true
						}
					} else {
						item.active = false
					}
				})
			},
			refresh() {
				this.isget = this.mygd = false
				this.params.page = 1
				this.dataList = []
				this.getList()
			},
			async getList() {
				this.isOnLoad = true
				let {
					data
				} = await this.util.request({
					'url': this.api.statementTransaction,
					method: 'POST',
					data: this.params,
				})
				this.result = data
				this.dataList = this.dataList.concat(data)
				this.isget = true
				this.mygd = this.params.size > data.length
				this.params.page++
			}
		},
	}
</script>

<style scoped lang="scss">
	.cmymain {
		background: #fff;
		padding-top: 0;
	}

	.stabsc {
		height: 90rpx;
	}
</style>
